import { Canvas, Chart, Interval, Axis, Legend, Timeline } from "@antv/f2";
import { BOX2_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box22({ hasTitle = true }) {
  const data = [
    { name: "患者人数", num: 18, a: '1' },
    { name: "使用人数", num: 48, a: '1' }
  ];
  useEffect(() => {
    const context = document.getElementById("Box2_2").getContext("2d");
    if (!context) return
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={data}
          coord={{
            transposed: true,
            type: 'polar',
          }}
        >
          <Interval
            x="a"
            y="num"
            adjust="stack"
            color={{
              field: 'name',
              range: ['#04ca92', '#a284e6'],
            }}
          />
          <Legend nameStyle={{ fontSize: "30px" }} position="right" />
        </Chart>
      </Canvas>
    )
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX2_NAME}</div>}
      <canvas className={styles.main} id="Box2_2"></canvas>
    </div>
  );
}

export function Box2({ hasTitle = true }) {
  const data = [
    { num: 239, name: "在院患者", date: "2023-03-25" },
    { num: 136, name: "在院患者", date: "2023-03-26" },
    { num: 176, name: "在院患者", date: "2023-03-27" },
    { num: 226, name: "在院患者", date: "2023-03-28" },
    { num: 252, name: "在院患者", date: "2023-03-29" },
    { num: 168, name: "在院患者", date: "2023-03-30" },
    { num: 215, name: "使用平台患者", date: "2023-03-25" },
    { num: 120, name: "使用平台患者", date: "2023-03-26" },
    { num: 159, name: "使用平台患者", date: "2023-03-27" },
    { num: 204, name: "使用平台患者", date: "2023-03-28" },
    { num: 217, name: "使用平台患者", date: "2023-03-29" },
    { num: 146, name: "使用平台患者", date: "2023-03-30" },
  ];
  useEffect(() => {
    const context = document.getElementById("Box2").getContext("2d");
    if (!context) return
    const { offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart data={data} style={{ left: "-10px" }}>
          <Legend
            itemStyle={{ width: offsetWidth / 3 }}
          />
          <Axis
            field="date"
            style={{
              grid: { visibility: 0 },
            }}
            tickCount={3}
            formatter={(label) => label.slice(5).replace("-", ",")}
          />
          <Axis field="num" />
          <Interval
            x="date"
            y="num"
            style={{
              radius: [4, 4, 0, 0],
            }}
            color={{ field: "name", range: ["#07ca93", "#a284e9"] }}
            adjust={{
              type: "dodge",
              marginRatio: 0.05, // 设置分组间柱子的间距
            }}
          />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX2_NAME}</div>}
      <canvas className={styles.main} id="Box2"></canvas>
    </div>
  );
}
